<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <h1>Coffee Order</h1>
    <ul id="orders">
        <!-- <li class="order" id="1">
            <p>
                Name: 
                <span class="name">John</span>
                <input type="text" class="name nonedit">
            </p>
            <p>
                Drink: 
                <span class="drink">Coffee</span>
                <input type="text" class="drink nonedit">
            </p>
            <button data-id="1" class="delete-order">Delete</button>
            <button class="edit-order">Edit</button>
            <button class="save-edit nonedit">Save</button>
            <button class="cancel-edit nonedit">Cancel</button>
        </li>
        <li class="order" id="2">
            <p>
                Name: 
                <span class="name">Emily</span>
                <input type="text" class="name nonedit">
            </p>
            <p>
                Drink: 
                <span class="drink">Mocha</span>
                <input type="text" class="drink nonedit">
            </p>
            <button data-id="2" class="delete-order">Delete</button>
            <button class="edit-order">Edit</button>
            <button class="save-edit nonedit">Save</button>
            <button class="cancel-edit nonedit">Cancel</button>
        </li> -->
    </ul>

    <h4>Add a Coffee Order</h4>
    <p>name: <input type="text" id="name"></p>
    <p>drink: <input type="text" id="drink"></p>
    <button id="add-order">Add!</button>
    
    <script src="./jquery-3.5.1.js"></script>
    <script src="./script.js"></script>
</body>
</html>